<template>
    <div class="search-bar">
        <div class="label">
            {{label}}：
        </div>

        <div class="list">
            <div 
            class="item" 
            :class="{active: value === item[props.value]}"
            v-for="(item, index) in usingData"
            :key="index"
            @click="clickHandler(item,index)"
            >
                {{item[props.label]}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        value: {
            type: [String, Number],
            default: '',
        },
        label: {
            type: String,
            default: '',
        },
        props: {
            type: Object,
            default: () => ({
                label: 'dicname',
                value: 'diccode',
            }),
        },
        action: {
            type: String,
            default: '',
        },
        all: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            innerData: [],
        };
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
        usingData() {
            if (this.action) {
                return this.innerData;
            } else {
                return this.data;
            }
        },
    },
    methods: {
        clickHandler(item,index) {
            this.model = item[this.props.value];

            this.$emit('click', item, index);
        },
        queryData() {
            if (!this.action) return;

            this.$get(this.action, data => {
                if (this.all) {
                    data.unshift({
                        [this.props.label]: '全部',
                        [this.props.value]: '',
                    });
                }
                
                this.innerData = data;
            });
        },
    },
    mounted() {
        this.queryData();
    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .search-bar {
        overflow: hidden;
        color: #333;
        line-height: 1em;
        padding: 20px 0;

        & + .search-bar{
            border-top: 1px dashed #F0F0F0;
        }

        .label {
            float: left;
            margin-right: -6em;
            font-weight: bold;
            padding: 6px;
        }

        .list {
            overflow: hidden;
            margin: -8px 0;
            margin-left: 6em;
            float: left;

            .item{
                float: left;
                margin: 8px 12px 8px 0;
                padding: 6px;
                cursor: pointer;

                &:hover{
                    color: #fff;
                    background-color: $primaryColor;
                }

                &.active{
                    color: #fff;
                    background-color: $primaryColor;
                }
            }
        }
    }
</style>